<template>
    <div class="dashboard-container">
      <h2>销售数据可视化</h2>
      
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <sales-trend-chart />
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card>
            <category-sales-chart />
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
  
<script setup>
  import SalesTrendChart from './SalesTrendChart.vue';
  import CategorySalesChart from './CategorySalesChart.vue';
</script>
  
<style scoped>
  .dashboard-container {
    padding: 20px;
  }
</style>